<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .alldiv{
            /* 外部的div没有指定高度，里面的子元素的都浮动了 内部高度就为0了 怎么保持原来的高度呢？ 清除浮动*/
            border: 3px dotted red;
            /* 方法2 overflow : hidden */
            
        }
        .div1,.div2{
            width: 300px;
            height: 300px;
            background-color: yellow;
            float: left;
        }
         /* 方法一 after伪元素 */
          .alldiv::after{
            content: '';
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;
        } 

        /* 方法3 定义一个div元素 */
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="alldiv">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="clear"></div>
        <!-- 方法4 使用br标签 自带clear属性 -->
        <br clear="all">
    </div>
</body>
</html>